<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
    <!-- <link rel="icon" href=""> -->
    <title>运营工具</title>

    <!-- <link rel="dns-prefetch" href="//cdn.jsdelivr.net"> -->
    <meta content="yes" name="apple-touch-fullscreen">
    <meta content="yes" name="apple-mobile-web-app-capable">

    <link rel="stylesheet" href="/homemobile/kehu/css/weui.min.css">
    <link rel="stylesheet" href="/homemobile/kehu/css/base.css">

    <style>
      .client-wrap {
        padding: .24rem;
      }
      .client-name {
        font-size: .32rem;
      }
      .client-item {
        padding: .24rem 0;
        border-bottom: 1px solid #eee;
      }
      .client-item .weui-check__label {
        padding: 0;
        border-radius: 3px;
      }
      .client-avatar {
        width: 1.2rem;
        height: 1.2rem;
        object-fit: cover;
        border-radius: .16rem;
        margin-right: .3rem;
      }
      .client-tags-box {
        height: .7rem;
        padding: .08rem 0;
        white-space: nowrap;
        overflow: hidden;
      }
      .client-tag {
        display: inline-block;
        font-size: .24rem;
        color: #555;
        padding: 2px 8px;
        margin-right: 2px;
        background: #f5f5f5;
        border-radius: 3px;
      }
      .dialog-main .form-line-label {
        width: 1.4rem;
      }
    </style>

  </head>
  <body>

    <div class="d-flex justify-sb align-items-center page-nav">
      <div class="page-back">
        <a href="javascript:" onClick="javascript:history.go(-1);" ><img src="/homemobile/kehu/img/back.png" alt=""></a>
        
        <span>客户管理</span>
      </div>
      <div class="page-nav-action">
        <!-- <a href="javascript:" class="weui-btn_cell weui-btn_mini weui-btn_cell-default filter-btn">
          <img src="/homemobile/kehu/img/filter.png" alt="">
          <span>筛选</span>
        </a> -->
        <a href="javascript:" class="weui-btn weui-btn_mini weui-btn_primary batch-tag">批量打标签</a>
      </div>
    </div>

    <div class="client-section">
      <div class="client-wrap">
        <div class="d-flex align-items-center justify-sb">
          <p class="vertical-line-title" style="margin-bottom: 0;">共{count($res)}个客户</p>
          <div class="weui-cells_checkbox">
            <label class="weui-cell weui-cell_active weui-check__label" for="s11" style="padding: 1px 2px;">
              <div class="weui-cell__hd" style="padding-right: 5px;">
                <input type="checkbox" class="weui-check client-checkall" name="checkbox1" id="s11">
                <i class="weui-icon-checked"></i>
              </div>
              <div class="weui-cell__bd">全选</div>
            </label>
          </div>
        </div>
        <p style="color: #999;">{date('m月d日')}</p>

        <!-- <?php dump($res);?> -->
        {loop $res as $r}
        <div class="weui-cells_checkbox client-item">
          <label class="weui-cell weui-cell_active weui-check__label d-flex align-items-center">
            <img class="client-avatar" src="{$r->avatar}" alt="">
            <div class="flex-1">
              <p class="ellipsis client-name">{$r->name}</p>
              <div class="client-tags-box">
                {loop $r->tags as $g}
                <div class="client-tag">{$etTagArrname[$g]}</div>
                {/loop}
              </div>
            </div>
            <div class="weui-cell__hd" style="padding-right: 5px;">
              <input type="checkbox" class="weui-check client-item-check" value="{$r->id}">
              <i class="weui-icon-checked"></i>
            </div>
          </label>
        </div>
        {/loop}
      </div>
    </div>
    
    <!-- 选标签面板 -->
    <div style="display: none;" id="tagsDialog" class="dialog-main">
      <p class="dialog-title">选择标签</p>
      <img onclick="closeDialog(this)" class="dialog-close" src="/homemobile/kehu/img/close.png" alt="">
      <div class="dialog-tip">
        将给选择的<span class="dialog-tag-pnum">2</span>个客户批量打标签，请选择标签
      </div>
      <!-- <?php dump($etTagArr)?> -->
      <div style="min-height: 300px;">
        {loop $etTagArr as $ettag}
        <p style="font-size: 12px;margin: 6px 0;">{$ettag['group_name']}：</p>
        <div class="d-flex flex-wrap">
          {loop json_decode($ettag['tags'],1) as $tag}
          <div class="dialog-tag" data-val="{$tag['id']}">{$tag['name']}</div>
					 
				 {/loop}	
          <!-- <div class="dialog-tag disabled">一般</div>
          <div class="dialog-tag active">一般一般一般一般一般一般</div>
          <div class="dialog-tag">一般</div>
          <div class="dialog-tag">一般</div> -->
        </div>
        {/loop}	
        <!-- <p style="font-size: 12px;margin: 6px 0;">自定义：</p>
        <div class="d-flex flex-wrap">
          <div class="dialog-tag">一般</div>
          <div class="dialog-tag">一般</div>
          <div class="dialog-tag">一般</div>
          <div class="dialog-tag">一般</div>
        </div> -->
      </div>
      <div style="text-align: right;margin-top: 20px;">
        <a onclick="closeDialog(this)" href="javascript:" class="weui-btn weui-btn_mini weui-btn_default" style="font-size:13px;margin-right:.24rem;color:#666;">取消</a>
        <a href="javascript:" class="weui-btn weui-btn_mini weui-btn_primary tag-select-confirm" onclick = "cs()" style="font-size:13px;">确定</a>
      </div>
    </div>
    <!-- 筛选面板 -->
    <div style="display: none;" id="filterDialog" class="dialog-main">
      <p class="dialog-title">筛选</p>
      <img onclick="closeDialog(this)" class="dialog-close" src="/homemobile/kehu/img/close.png" alt="">
      
      <div class="d-flex align-items-center form-line">
        <div class="form-line-label">企业标签：</div>
        <div class="flex-1 form-multi-select">
          <span class="form-selected-placeholder">请选择标签</span>
        </div>
      </div>
      <div class="d-flex align-items-center form-line">
        <div class="form-line-label">添加时间：</div>
        <div class="flex-1 d-flex align-items-center">
          <input id="startTime" type="text" readonly class="flex-1 form-input form-input-date" placeholder="开始日期">
          <span style="padding: 0 5px;">~</span>
          <input id="endTime" type="text" readonly class="flex-1 form-input form-input-date" placeholder="结束日期">
        </div>
      </div>
      <div class="d-flex align-items-center form-line">
        <div class="form-line-label">添加渠道：</div>
        <select class="flex-1 weui-select form-select" name="select1">
          <option value="1">专属名片</option>
          <option value="2">其他渠道</option>
        </select>
      </div>
      <div class="d-flex align-items-center form-line">
        <div class="form-line-label">客户性别：</div>
        <select class="flex-1 weui-select form-select" name="select2">
          <option value="1">男</option>
          <option value="2">女</option>
          <option value="3">未知</option>
        </select>
      </div>
      <div class="d-flex align-items-center form-line">
        <div class="form-line-label">流失状态：</div>
        <select class="flex-1 weui-select form-select" name="select3">
          <option value="1">已流失</option>
          <option value="2">未流失</option>
        </select>
      </div>
      <div style="text-align: right;margin-top: 20px;">
        <a href="javascript:" class="weui-btn weui-btn_mini weui-btn_default filter-reset" style="font-size:13px;margin-right:.24rem;color:#666;">重置</a>
        <a href="javascript:" class="weui-btn weui-btn_mini weui-btn_primary filter-confirm" style="font-size:13px;">确定</a>
      </div>
    </div>
    

    <!-- <script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> -->
    <script src="/homemobile/kehu/js/jquery.min.js"></script>
    <script src="/homemobile/kehu/js/weui.min.js"></script>
    <script src="/homemobile/kehu/js/common.js"></script>
    <script src="/layui/layui.js"></script>
	  <script src="/js/ajax.js"></script>
    <script>
      function cs(){
        var tags=[]; 
        var khs=[];
        $(".active").each(function(){
          tags.push($(this).attr('data-val'))
        });
        var checkedNodes = $('.client-item-check:checked').each(function(){
          khs.push($(this).val())
        });
       console.log(khs);
       console.log(tags);
      var datas=!{"tag":tags,"kh":khs};
      myAjaxPost(false, true, "/Addons/Operationaltools/H5/Reply/crmdo.html", datas, function (resp) {
        console.log(resp);
			if (resp.status == 'success') {
				tusi(resp.msg);
				setTimeout(function(){
					//parent.layer.closeAll('iframe');
          location.reload(); 
				},2000);
			}else{
				alert(resp.msg);
			}
		});
      }
      var tagsTrigger;

      $(document).on('click', '.client-checkall', function() {
        var _this = $(this)
        _this.parentsUntil('.client-section')
          .find('.client-item-check')
          .prop('checked', _this.is(':checked'))
      })
      // 批量打标签
      $('.batch-tag').on('click', function() {
        var checkedNodes = $('.client-item-check:checked')
        if (!checkedNodes.length) {
          weui.topTips('请先选择一个客户', 1500);
          // weui.toast('请先选择一个客户', 2000);
        } else {
          $('#tagsDialog .dialog-tip').show()
          $('.dialog-tag-pnum').text(checkedNodes.length)
          tagsTrigger = null
          showDialog('#tagsDialog')
        }
      })

      // 选择标签
      $(document).on('click', '.form-multi-select', function(e) {
        $('#tagsDialog .dialog-tip').hide()
        tagsTrigger = '.form-multi-select'
        showDialog('#tagsDialog')
      })
      $(document).on('click', '.dialog-tag', function(e) {
        var _this = $(this)
        if (!_this.hasClass('disabled')) {
          _this.toggleClass('active')
        }
      })
      $(document).on('click', '.tag-select-confirm', function(e) {
        var _this = $(this)
        var pNode = _this.parentsUntil('.m-dialog')
        var selected = pNode.find('.dialog-tag.active')
        if (tagsTrigger) {
          var selectedValue = ''
          for (var i = 0; i < selected.length; i++) {
            selectedValue += '<div class="form-selected-block"><span>' + selected[i].innerText +'</span><span class="form-selected-clear"></span></div>'
          }
          $(tagsTrigger).html(selectedValue || '<span class="form-selected-placeholder">请选择标签</span>')
        }
        closeDialog()
      })
      $(document).on('click', '.form-selected-clear', function(e) {
        e.stopPropagation()
        $(this).parent().remove()
      })

      // 日期选择
      $(document).on('click', '.form-input-date', function(e) {
        var _this = $(this)
        var date = _this.val()
        var options = {
          // start: new Date(), // 从今天开始
          start: 1990,
          end: 2030,
          // defaultValue: ['2022', '07', '07'],
          onConfirm: function(result){
            _this.val(formatDateResult(result))
          },
          id: _this[0].id
        }
        if (date) options.defaultValue = date.split('-');
        weui.datePicker(options)
      })
      // 格式化日期选择器的结果为: 2020-10-10
      function formatDateResult(result) {
        var str = ''
        for(var i = 0; i < result.length; i++) {
          str += i === 0 ? '' : '-'
          str += result[i] > 9 ? result[i] : ('0' + result[i])
        }
        return str
      }

      // 筛选
      $('.filter-btn').on('click', function() {
        showDialog('#filterDialog')
      })
    </script>
  </body>
</html>
